<template>
  <div class="p-3">
    <a-form class="!mb-3" :model="searchModel" layout="inline">
      <a-form-item label="手机号码" name="cellphone">
        <a-input v-model:value="searchModel.cellphone" />
      </a-form-item>
      <a-form-item label="用户昵称" name="nickName">
        <a-input v-model:value="searchModel.nickName" />
      </a-form-item>
      <a-form-item label="用户类型" name="userType">
        <a-select v-model:value="searchModel.userType" :options="userTypeData" class="!w-32" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">筛选</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="pageData"
      :pagination="pagination"
      :loading="loading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'oper'">
          <a-space>
            <a-button type="primary" @click="more(record)">更多信息</a-button>
            <a-button danger type="primary" @click="doToggleWords(record)">
              {{ record.status ? "禁言" : "解除禁言" }}
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <a-drawer v-model:visible="drawerVisible" :title="drawerTitle" placement="right" class="user-drawer">
      <a-descriptions :column="1" title="基本信息" :colon="false">
        <a-descriptions-item label="头像"></a-descriptions-item>
        <a-descriptions-item label="昵称"></a-descriptions-item>
        <a-descriptions-item label="个性签名"></a-descriptions-item>
        <a-descriptions-item label="简介"></a-descriptions-item>
        <a-descriptions-item label="微信"></a-descriptions-item>
        <a-descriptions-item label="允许其他会员查看微信">
          <a-switch></a-switch>
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="1" title="联系方式（仅做会员资料寄送）" :colon="false">
        <a-descriptions-item label="真实姓名"></a-descriptions-item>
        <a-descriptions-item label="手机"></a-descriptions-item>
        <a-descriptions-item label="收货地址"></a-descriptions-item>
      </a-descriptions>
      <a-descriptions :column="1" title="职位信息" :colon="false">
        <a-descriptions-item label="公司名称"></a-descriptions-item>
        <a-descriptions-item label="您的职位"></a-descriptions-item>
        <a-descriptions-item label="所在城市"></a-descriptions-item>
      </a-descriptions>
    </a-drawer>
  </div>
</template>
<script lang="ts" setup>
import { Modal } from "ant-design-vue";
import { onMounted, reactive, ref } from "vue";
import { getAppUsers, toggleWords, AppUserInfo } from "/@/api/manage/userManage";
import { getAllMemberLevels, MemberLevel } from "/@/api/manage/setting";
import { usePagination } from "/@/hooks/web/usePagination";
import { SelectItem } from "/@/types/antd";
import { getLabelByValue } from "/@/utils/common";

const searchModel = reactive({
  cellphone: "",
  nickName: "",
  userType: "",
});
const userTypeData = ref<SelectItem[]>([]);
function search() {
  refreshPagination({ model: searchModel });
}
//table
const columns = [
  {
    title: "ID",
    dataIndex: "id",
  },
  {
    title: "昵称",
    dataIndex: "nickName",
  },
  {
    title: "真实姓名",
    dataIndex: "name",
  },
  {
    title: "手机号码",
    dataIndex: "cellphone",
  },
  {
    title: "头像",
    dataIndex: "avatar",
  },
  {
    title: "类型",
    dataIndex: "userType",
    customRender({ text }) {
      console.log(text, userTypeData.value);
      return getLabelByValue(text, userTypeData.value);
    },
  },
  {
    title: "状态",
    dataIndex: "status",
    customRender({ text }) {
      return text ? "正常" : "已禁言";
    },
  },
  {
    title: "操作",
    key: "oper",
  },
];
const { refreshPagination, pagination, pageData, loading } = usePagination(getAppUsers);
onMounted(async () => {
  const data = (await getAllMemberLevels()) as MemberLevel[];
  if (data) {
    const arr: SelectItem[] = [
      {
        value: "",
        label: "所有",
      },
    ];
    data.forEach((item) => {
      arr.push({
        label: item.levelName,
        value: item.id as string,
      });
    });
    userTypeData.value = arr;
  }
  await refreshPagination();
});
//moreinfo
const drawerVisible = ref(false);
const drawerTitle = ref("");
function more(record) {
  drawerTitle.value = `${record.name}详细信息`;
  drawerVisible.value = true;
}
//禁言 解除禁言
async function doToggleWords(record: AppUserInfo) {
  Modal.confirm({
    title: record.status ? "确认对该用户禁言？" : "确认解除该用户禁言？",
    content: record.status ? "禁言后无法发布动态及评论" : "解除后可发布动态及评论",
    onOk: async () => {
      const re = await toggleWords(record.id as string, record.status === 1 ? 0 : 1);
      if (re) {
        await refreshPagination();
      }
    },
  });
}
</script>
<style lang="less">
.user-drawer {
  .ant-descriptions-item-label {
    width: 160px;
  }
  .ant-descriptions-item-content {
    justify-content: flex-end;
  }
}
</style>
